<!DOCTYPE html>
<!-- 灵活PPT模板 - LLM完全自定义生成 -->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary: {{ colors.primary if colors else '#3b82f6' }};
            --accent: {{ colors.accent if colors else '#60a5fa' }};
            --bg: {{ colors.background if colors else '#ffffff' }};
            --text: {{ colors.text if colors else '#1f2937' }};
            --secondary: {{ colors.secondary if colors else '#6b7280' }};
        }

        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
            background: #f3f4f6;
            overflow-x: hidden;
        }

        .presentation {
            width: 100vw;
            height: 100vh;
            scroll-snap-type: y mandatory;
            overflow-y: scroll;
        }

        .slide {
            width: 100vw;
            height: 100vh;
            scroll-snap-align: start;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 60px;
        }

        /* ========== CSS组件库 ========== */

        /* 文本样式 */
        .text-xs { font-size: 0.75em; }
        .text-sm { font-size: 0.875em; }
        .text-base { font-size: 1em; }
        .text-lg { font-size: 1.125em; }
        .text-xl { font-size: 1.25em; }
        .text-2xl { font-size: 1.5em; }
        .text-3xl { font-size: 1.875em; }
        .text-4xl { font-size: 2.25em; }
        .text-5xl { font-size: 3em; }
        .text-6xl { font-size: 3.75em; }
        .text-7xl { font-size: 4.5em; }
        .text-8xl { font-size: 6em; }
        .text-9xl { font-size: 8em; }

        .font-light { font-weight: 300; }
        .font-normal { font-weight: 400; }
        .font-medium { font-weight: 500; }
        .font-semibold { font-weight: 600; }
        .font-bold { font-weight: 700; }
        .font-black { font-weight: 900; }

        .text-left { text-align: left; }
        .text-center { text-align: center; }
        .text-right { text-align: right; }

        /* 颜色 */
        .text-primary { color: var(--primary); }
        .text-accent { color: var(--accent); }
        .text-text { color: var(--text); }
        .text-secondary { color: var(--secondary); }
        .text-white { color: #ffffff; }
        .text-black { color: #000000; }

        .bg-primary { background: var(--primary); }
        .bg-accent { background: var(--accent); }
        .bg-bg { background: var(--bg); }
        .bg-white { background: #ffffff; }
        .bg-black { background: #000000; }
        .bg-gray-50 { background: #f9fafb; }
        .bg-gray-100 { background: #f3f4f6; }
        .bg-gray-200 { background: #e5e7eb; }

        /* 布局 */
        .flex { display: flex; }
        .flex-col { flex-direction: column; }
        .flex-row { flex-direction: row; }
        .flex-1 { flex: 1 1 0%; }
        .items-start { align-items: flex-start; }
        .items-center { align-items: center; }
        .items-end { align-items: flex-end; }
        .justify-start { justify-content: flex-start; }
        .justify-center { justify-content: center; }
        .justify-end { justify-content: flex-end; }
        .justify-between { justify-content: space-between; }
        .justify-around { justify-content: space-around; }

        .grid { display: grid; }
        .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
        .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
        .grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

        .gap-1 { gap: 0.25rem; }
        .gap-2 { gap: 0.5rem; }
        .gap-4 { gap: 1rem; }
        .gap-6 { gap: 1.5rem; }
        .gap-8 { gap: 2rem; }
        .gap-12 { gap: 3rem; }
        .gap-16 { gap: 4rem; }

        /* 间距 */
        .p-2 { padding: 0.5rem; }
        .p-4 { padding: 1rem; }
        .p-6 { padding: 1.5rem; }
        .p-8 { padding: 2rem; }
        .p-12 { padding: 3rem; }
        .p-16 { padding: 4rem; }

        .m-2 { margin: 0.5rem; }
        .m-4 { margin: 1rem; }
        .m-6 { margin: 1.5rem; }
        .m-8 { margin: 2rem; }
        .m-12 { margin: 3rem; }
        .m-16 { margin: 4rem; }

        .mt-2 { margin-top: 0.5rem; }
        .mt-4 { margin-top: 1rem; }
        .mt-6 { margin-top: 1.5rem; }
        .mt-8 { margin-top: 2rem; }
        .mb-2 { margin-bottom: 0.5rem; }
        .mb-4 { margin-bottom: 1rem; }
        .mb-6 { margin-bottom: 1.5rem; }
        .mb-8 { margin-bottom: 2rem; }

        /* 宽高 */
        .w-full { width: 100%; }
        .w-1\/2 { width: 50%; }
        .w-1\/3 { width: 33.333%; }
        .w-2\/3 { width: 66.666%; }
        .h-full { height: 100%; }
        .h-64 { height: 16rem; }
        .h-80 { height: 20rem; }
        .h-96 { height: 24rem; }

        /* 圆角 */
        .rounded { border-radius: 0.25rem; }
        .rounded-md { border-radius: 0.375rem; }
        .rounded-lg { border-radius: 0.5rem; }
        .rounded-xl { border-radius: 0.75rem; }
        .rounded-2xl { border-radius: 1rem; }
        .rounded-full { border-radius: 9999px; }

        /* 阴影 */
        .shadow { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1); }
        .shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
        .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
        .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }

        /* 边框 */
        .border { border: 1px solid #e5e7eb; }
        .border-2 { border: 2px solid #e5e7eb; }
        .border-4 { border: 4px solid #e5e7eb; }
        .border-primary { border-color: var(--primary); }
        .border-accent { border-color: var(--accent); }
        .border-l-4 { border-left: 4px solid; }
        .border-l-primary { border-left-color: var(--primary); }

        /* 透明度 */
        .opacity-50 { opacity: 0.5; }
        .opacity-75 { opacity: 0.75; }
        .opacity-90 { opacity: 0.9; }

        /* 特殊组件 */
        .gradient-primary {
            background: linear-gradient(135deg, var(--primary), var(--accent));
        }

        .card {
            background: white;
            padding: 2rem;
            border-radius: 0.5rem;
            box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1);
        }

        .badge {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.875rem;
            font-weight: 600;
        }

        .divider {
            width: 100%;
            height: 1px;
            background: #e5e7eb;
            margin: 2rem 0;
        }

        /* 动画 */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fadeIn { animation: fadeIn 0.6s ease-out; }
        .animate-slideUp { animation: slideUp 0.8s ease-out; }

        /* 导航提示 */
        .nav-hint {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 10px 20px;
            border-radius: 20px;
            font-size: 0.9em;
            opacity: 0.7;
            z-index: 1000;
            transition: opacity 0.5s;
        }

        /* 页码 */
        .page-number {
            position: absolute;
            bottom: 30px;
            right: 60px;
            font-size: 1em;
            color: var(--secondary);
            opacity: 0.6;
        }

        @media print {
            .presentation { height: auto; overflow: visible; }
            .slide { page-break-after: always; height: auto; min-height: 100vh; }
            .nav-hint { display: none; }
        }
    </style>
</head>
<body>
    <div class="presentation">
        {% for slide in slides %}
        <div class="slide" style="{{ slide.custom_style if slide.custom_style else '' }}">
            {{ slide.html_content | safe }}
            <div class="page-number">{{ slide.slide_number }} / {{ slides|length }}</div>
        </div>
        {% endfor %}
    </div>

    <div class="nav-hint">← → 或滚动翻页</div>

    <script>
        // 键盘导航
        document.addEventListener('keydown', function(e) {
            const slides = document.querySelectorAll('.slide');
            const current = Math.round(document.querySelector('.presentation').scrollTop / window.innerHeight);

            if (e.key === 'ArrowDown' || e.key === 'ArrowRight' || e.key === 'PageDown' || e.key === ' ') {
                e.preventDefault();
                if (current < slides.length - 1) {
                    slides[current + 1].scrollIntoView({ behavior: 'smooth' });
                }
            } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft' || e.key === 'PageUp') {
                e.preventDefault();
                if (current > 0) {
                    slides[current - 1].scrollIntoView({ behavior: 'smooth' });
                }
            } else if (e.key === 'Home') {
                e.preventDefault();
                slides[0].scrollIntoView({ behavior: 'smooth' });
            } else if (e.key === 'End') {
                e.preventDefault();
                slides[slides.length - 1].scrollIntoView({ behavior: 'smooth' });
            }
        });

        // 隐藏提示
        setTimeout(() => {
            const hint = document.querySelector('.nav-hint');
            hint.style.opacity = '0';
            setTimeout(() => hint.style.display = 'none', 500);
        }, 3000);
    </script>
</body>
</html>
